<template>
	<div class="coupons">
		<div class="coupon" v-for="(item, index) in surveyList" :key="index" @click="goPage(item.url, item)">
			<img :src="item.PIC ? item.PIC :'https://crm.fwh1988.cn/newimg/wenquan/wenjuanbg.png'" alt="" class="bg" />
			<div class="title">
				<text v-if="!item.PIC"> {{ item.QUESTION_TITLE }}</text>
			</div>
			<div class="btn">点击开始></div>
			<div class="no-condition" v-if="item.EXISTS_NUM == 0">不满足条件</div>
		</div>
	</div>
</template>
<script>
	import {
		IMG_URL2
	} from '@/api'
	export default {
		props: {
			surveyList: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				imgs: [
					`${IMG_URL2}/coupon/used.png`,
					`${IMG_URL2}/coupon/present.png`,
					`${IMG_URL2}/coupon/expired.png`,
					`${IMG_URL2}/Group 14@2x.png`
				]
			}
		},
		methods: {
			goPage(url, obj) {
				console.log(url)
				if (obj.EXISTS_NUM == 0) {
					wx.navigateTo({
						url: '/pages_index/noSurveryCondition/index?question_id=' + obj.QUESTION_ID
					})
					return
				}
				wx.navigateTo({
					url
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.no-condition {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		width: 154rpx;
		height: 40rpx;
		background: rgba(0, 0, 0, 0.6);
		border-radius: 4rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #FFFFFF;
		line-height: 28rpx;
		text-align: left;
		font-style: normal;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.coupons {
		width: 100%;
		// display: flex;
		min-height: calc(100vh - 88rpx);
		justify-content: center;
		flex-wrap: wrap;
		// margin-bottom: 164rpx;
		// min-height: 70vh;
		background: #f2f3f5;
		overflow-y: auto;
		padding-top: 24rpx;

		.coupon {
			min-height: 240rpx;
			//  margin-top: 22rpx;
			margin: 0 24rpx 24rpx;
			padding: 36rpx 0 10rpx 42rpx;
			position: relative;
			background: #fff;
			border-radius: 24rpx;
			display: flex;
			flex-direction: column;

			.bg {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
			}

			.title {
				font-size: 22px;
				font-weight: 600;
				color: #00584a;
				z-index: 10;
				min-height: 60rpx;
			}

			.btn {
				z-index: 10;
				width: 156rpx;
				height: 52rpx;
				background: linear-gradient(180deg, #5f8f84 0%, #00584a 100%);
				border-radius: 30rpx;
				text-align: center;
				line-height: 52rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #ffffff;
				margin-top: 62rpx;
				margin-bottom: 10rpx;
			}
		}
	}
</style>